<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>人脉圈</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <style>
        body {
            font-size: 14px;
        }

        header {
            background: #327afa;
            padding: 12px;
            position: fixed;
            width: 100%;
            z-index: 99;
            top: 0;
        }

        .hyHeader .aui-list-view {
            margin-bottom: 0px;
        }

        .contain {
            background: #ededed;
        }

        .aui-tab-nav {
            width: 50%;
            margin: 0 auto;
            font-size: 13px;
            border: 1px solid #fff;
            height: 35px;
            line-height: 35px !important;
        }

        .aui-tab-nav.aui-tab-border {
            border-color: #fff;
        }

        .aui-tab-nav.aui-tab-border li {
            height: 35px;
            line-height: 35px !important;
            color: #fff;
            background: transparent;
        }

        .aui-list-view {
            margin-bottom: 8px;
        }

        header .aui-tab-nav.aui-tab-border li.active {
            color: #327afa;
            background: #fff;
            border-bottom: 2px #327afa solid;
        }

        .header-icon {
            position: absolute;
            top: 50%;
            margin-top: -16px;
            right: 15px;
            color: #fff;
        }

        .header-icon .aui-icon-add {
            margin-right: 8px;
        }

        .header-icon .aui-iconfont {
            font-size: 20px;
        }

        .wdheader img {
            width: 100%;
        }

        .wdheader {
            display: none;
        }

        .aui-list-view i.aui-iconfont.aui-icon-location {
            color: #ff7b06;
            margin-right: 0;
            padding: 0;

        }

        .pingluns i.aui-iconfont {
            margin: 0;
        }

        .renmaiType {
        }

        .aui-list-view.weizhi {
            background: none;
            font-size: 13px;
            margin-top: 8px;
        }

        .weizhi .aui-list-view-cell {
            margin-bottom: 0;
            background: none;
            padding: 0px 15px;
        }

        .weizhi .aui-list-view-cell > a {
            margin: 0px -15px;
        }

        .weizhi .aui-list-view-cell:after {
            border: none;
        }

        .weizhi .aui-arrow-right:after {
            content: "\e6a4";
            font-size: 18px;
        }

        /*动态*/

        .dongtai ul {
            background: #e8e8e8;
        }

        .dongtai .aui-list-view .aui-img-object {
            max-width: 10%;
            /*height: 40px;*/
            float: left;
        }

        .dongtai .dongtaiContent {
            float: left;
            width: 88%;
        }

        .aui-list-view .aui-img-object {
            height: auto;
        }

        .aui-list-view .aui-img-object.aui-pull-left {
            margin-right: 2%;
        }

        .dongtai .aui-list-view-cell {
            margin-bottom: 6px;
            background: #fff;
            margin-top: 8px;
        }

        .aui-img-body {
            float: left;
            width: 100%;
        }

        .remenType ul {
            background: #fff;
        }

        .aui-list-view:after {
            border: none;
        }

        .type {
            font-size: 12px;
            background: #327afa;
            color: #fff;
            padding: 2px 5px;
        }

        .title {
            width: 100%;
            /*display: inline-block;*/
            margin: 6px;
        }

        .content img {
            width: 31%;
            margin-left: 2%;
            float: left;
            margin-top: 8px;
        }

        .companyName {
            color: #327afa;
            width: 74%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pingluns {
            width: 100%;
            float: left;
            padding-left: 12%;
            margin-top: 5px;
            height: 24px;
            line-height: 24px;
        }

        .time {
            font-size: 12px;
            margin-left: 2%;
            color: #999;
        }

        .aui-icon-commentfill {
            color: #327afa !important;
        }

        .pinglun {
            overflow: hidden;
            position: relative;
            width: 130px;
            height: 40px;
        }

        .pinglun .commentLayer {
            background: rgba(0, 0, 0, .7);
            color: #fff;
            border-radius: 4px;
            padding: 3px;
            font-size: 12px;
            right: -100%;
            position: absolute;
        }

        .pinglun i:before {
            margin-right: 5px;
        }

        .colorB {
            color: #327afa;
        }

        .comments {
            padding-left: 8px;
            background: #e8e8e8;
            float: left;
            font-size: 12px;
            margin-top: 13px;
            margin-left: 14%;
        }

        .zan {
            padding: 8px 0;
            padding-left: 15px;
            font-size: 12px;
        }

        .zan.aui-icon-like:before {
            position: absolute;
            left: -4px;
            font-size: 15px;
        }

        .comment-list {
            padding: 8px 0;
        }

        /*显示评论和赞*/
        .showComment {
            animation: showComment 0.5s forwards;
        }

        @keyframes showComment0 {
            from {
                right: -100%;
            }
            to {
                right: 00%;
            }
        }

        /*隐藏评论和赞*/
        .hideComment {
            animation: hideComment 0.5s forwards;
        }

        @keyframes hideComment0 {
            from {
                right: 00%;
            }
            to {
                right: -100%;
            }
        }

        /*类别样式*/
        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }

        .contain-left .aui-list-view-cell {
            padding: 6px 0;
            margin: 0;

        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }

        .contain-right {
            /*padding: 12px;*/
            width: 75%;
            float: left;
        }

        .other {
            /*display: none;*/
            text-align: center;
        }

        .other .aui-list-view-cell {
            padding: 0px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }

        .other li {
            border: 1px solid #ececec;
            border-radius: 4px;
            width: 27%;
            float: left;
            margin-left: 5%;
            font-size: 12px;
            margin-top: 8px;
        }

        /*分类*/
        .renmaiType {
            position: relative;
            font-size: 14px;
            background: #fff;
            /*overflow: hidden;*/
            height: 34px;
            /*padding: 8px 0;*/
            line-height: 34px;
            margin-top: 8px;
        }

        .renmaiType > li.active {
            color: #327afa;
            font-weight: bold;
        }

        .renmaiType > li.active i.aui-icon-unfold:before {
            content: "\e6de";
        }

        .contain {
            display: none;
            position: absolute;
            top: 100%;
            z-index: 99;
            background: #fff;
            width: 100%;
        }

        .close {
            width: 100%;
            float: left;
            font-size: 14px;
        }

        .close i {
            position: relative;
            font-size: 12px;
        }

        .close i:before {
            position: absolute;
            top: -24px;
            left: 2px;
            font-size: 18px;
        }
        .wodeRenMai {
            display: none;
        }
        .added{
            background: #2ecc71 !important;
        }
    </style>
</head>
<body>
<div class="contains">
    <!-- 我的人脉头部 -->
    <div class="wdheader"><img src="../image/renmai.jpg"></div>
    <!-- 行业人脉头部 -->
    <div class="hyHeader">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" tapmode onclick="openToTwo('nearby_win')">
                <a class="aui-arrow-right">
                    <i class="aui-iconfont aui-icon-location "></i>
                    附近人脉
                </a>
            </li>
        </ul>
        <ul class="renmaiType">
            <li class="aui-col-xs-3 aui-text-center h5">全部分类<i class="aui-iconfont aui-icon-unfold"></i></li>
            <li class="aui-col-xs-3 aui-text-center h5">品牌商<i class="aui-iconfont aui-icon-unfold"></i></li>
            <li class="aui-col-xs-3 aui-text-center h5">选择地区<i class="aui-iconfont aui-icon-unfold"></i></li>
            <li class="aui-col-xs-3 aui-text-center h5">智能排序<i class="aui-iconfont aui-icon-unfold"></i></li>
            <div class="contain aui-border-t">
                <div class="contain-left">
                    <ul class="aui-list-view">
                        <li class="aui-list-view-cell aui-border-t  active">
                            全部分类
                        </li>
                        <li class="aui-list-view-cell aui-border-l aui-border-r">
                            家纺
                        </li>
                        <li class="aui-list-view-cell aui-border-l aui-border-r">
                            服装
                        </li>
                        <li class="aui-list-view-cell aui-border-l aui-border-r">
                            天然原料
                        </li>
                    </ul>
                </div>
                <div class="contain-right">
                    <div class="tuijian">
                        <!-- 非热门 -->
                        <div class="other">
                            <ul>
                                <li class="aui-list-view-cell aui-img ">
                                    <div class="aui-img-body">
                                        大象、服饰
                                    </div>
                                </li>
                                <li class="aui-list-view-cell aui-img ">
                                    <div class="aui-img-body">
                                        大象服饰
                                    </div>
                                </li>
                                <li class="aui-list-view-cell aui-img ">
                                    <div class="aui-img-body">
                                        大象服饰
                                    </div>
                                </li>
                                <li class="aui-list-view-cell aui-img ">
                                    <div class="aui-img-body">
                                        大象服饰
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="close aui-text-center">
                    <!-- 收起 -->
                    <i class="aui-iconfont aui-icon-fold">收起</i>
                </div>
            </div>
        </ul>
        <ul class="aui-list-view weizhi">
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">
                    当前：天河区中石化大厦
                </a>
            </li>
        </ul>
    </div>

    <!-- 行业人脉 -->
    <div class="dongtai hangyeRenMai">
        <ul class="aui-list-view ">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
                <div class="dongtaiContent">
                    <div class="aui-img-body">
                        <span class="companyName">佛山甘洋商贸有限责任公司商贸有限</span>
                        <div class="type aui-pull-right" onclick="addFriend(this)">加为人脉</div>
                    </div>
                    <div class="title">08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布</div>
                    <div class="content">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                    </div>
                </div>
                <div class="pingluns">
                    <span class="time">12分钟前</span>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
                <div class="dongtaiContent">
                    <div class="aui-img-body">
                        <span class="companyName">佛山甘洋商贸有限责任公司</span>
                        <div class="type aui-pull-right" onclick="addFriend(this)">加为人脉</div>
                    </div>
                    <div class="title"></div>
                    <div class="content">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                    </div>
                </div>
                <div class="pingluns">
                    <span class="time">12分钟前</span>
                </div>
            </li>
        </ul>
    </div>
    <!-- 我的人脉 -->
    <div class="dongtai wodeRenMai">
        <ul class="aui-list-view ">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
                <div class="dongtaiContent">
                    <div class="aui-img-body">
                        <span class="companyName">佛山甘洋商贸有限责任公司商贸有限</span>
                        <div class="type aui-pull-right">聊天</div>
                    </div>
                    <div class="title">08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布</div>
                    <div class="content">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                    </div>
                </div>
                <div class="pingluns">
                    <span class="time">12分钟前</span>
                    <i class="aui-iconfont aui-icon-commentfill aui-pull-right comment-icon "></i>
                    <div class="pinglun aui-pull-right ">
                        <div class="commentLayer ">
                            <i class="aui-iconfont aui-icon-appreciate ">赞</i>
                            <i class="aui-iconfont aui-icon-comment ">评论</i>
                        </div>
                    </div>
                </div>
                <div class="comments">
                    <div class="zan aui-iconfont aui-icon-like colorB aui-border-b">
                        刘德华,张学友,谭校长,张曼玉,古启明,郜林,郑智,斯克拉斯,尼古拉斯凯奇
                    </div>
                    <ul class="comment-list">
                        <li><span class="colorB">刘德华：</span>这首歌我会唱，你们会不会唱，来一首忘情水,还有一首笨小孩</li>
                        <li><span class="colorB">张学友：</span>我不会唱</li>
                        <li><span class="colorB">谭校长：</span>我全部会唱</li>
                    </ul>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
                <div class="dongtaiContent">
                    <div class="aui-img-body">
                        <span class="companyName">佛山甘洋商贸有限责任公司</span>
                        <div class="type aui-pull-right">聊天</div>
                    </div>
                    <div class="title"></div>
                    <div class="content">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                        <img src="../image/dongtai1.jpg">
                    </div>
                </div>
                <div class="pingluns">
                    <span class="time">12分钟前</span>
                    <i class="aui-iconfont aui-icon-commentfill aui-pull-right comment-icon "></i>
                    <div class="pinglun aui-pull-right ">
                        <div class="commentLayer ">
                            <i class="aui-iconfont aui-icon-appreciate ">赞</i>
                            <i class="aui-iconfont aui-icon-comment ">评论</i>
                        </div>
                    </div>
                </div>
                <div class="comments">
                    <div class="zan aui-iconfont aui-icon-like colorB aui-border-b">
                        刘德华2,张学友2,谭校长2,张曼玉2,古启明2,郜林2,郑智2,斯克拉斯2,尼古拉斯凯奇2
                    </div>
                    <ul class="comment-list">
                        <li><span class="colorB">刘德华2：</span>这首歌我会唱，你们会不会唱，来一首忘情水,还有一首笨小孩</li>
                        <li><span class="colorB">张学友2：</span>我不会唱</li>
                        <li><span class="colorB">谭校长2：</span>我全部会唱</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    var imgBase64;
    apiready = function () {
        api.parseTapmode();
        getInfo();
        api.addEventListener({
            name: 'reGetMyInfo'
        }, function (ret) {
            if (ret && ret.value) {
                var value = ret.value;
                if (value.key == 'true') {
                    getInfo();
                }
            }
        })
    }
    // 头部tab标签切换
    function headerChange(dataType) {
        if (dataType == "1") {
            $(".hyHeader").css({"display": "block"});
            $(".hangyeRenMai").css({"display": "block"});
            $(".wdheader").css({"display": "none"});
            $(".wodeRenMai").css({"display": "none"});
        } else {
            $(".hyHeader").css({"display": "none"});
            $(".hangyeRenMai").css({"display": "none"});
            $(".wdheader").css({"display": "block"});
            $(".wodeRenMai").css({"display": "block"});
        }
    }
    // 大类别的切换
    $(document).on("click", ".renmaiType>li", function () {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
            $(".contain").css({"display": "none"})
        } else {
            $(".contain").css({"display": "block"})
            $(this).parent().children("li").removeClass("active");
            $(this).addClass("active");
        }
    })
    //大类别收起
    $(document).on("click", ".close", function () {
        $(".renmaiType>li").removeClass("active");
        $(".contain").css({"display": "none"})
    })
    // 小类别的切换样式
    $(document).on("click", ".contain li", function () {
        $(this).parent().find("li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(this).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
    })
    //单击评论图标，显示隐藏赞和评论
    $(document).on("click", ".comment-icon", function () {
        var $commentLayer = $(this).parent().find(".commentLayer");
        // if($(this).parent())
        if ($commentLayer.hasClass("showComment")) {
            $commentLayer.removeClass("showComment");
            $commentLayer.addClass("hideComment");
            $commentLayer.animate({"right": "-100%"}, 500);
        } else {
            $commentLayer.addClass("showComment");
            $commentLayer.removeClass("hideComment");
            $commentLayer.animate({"right": "0"}, 500);
        }
    })
    //读取信息
    function getInfo() {
        getStorageAll();
        if (avatar) {
            var avatarDom = $api.byId('avatar');
            $api.attr(avatarDom, 'src', '' + imgUrl + avatar + '');
        } else {
            var avatarDom = $api.byId('avatar');
            $api.attr(avatarDom, 'src', '../image/noavatar.gif');
        }
        if (nick_name) {
            var nicknameDom = $api.dom('.nickname');
            $api.text(nicknameDom, '' + nick_name + '');
        } else {
            var nicknameDom = $api.dom('.nickname');
            $api.text(nicknameDom, '游客,请登录');
        }
    }

    function changeAvatar() {
        api.actionSheet({
            title: '请选择图片',
            cancelTitle: '取消',
            buttons: ['相册选取', '魅力自拍']
        }, function (ret, err) {
            if (ret.buttonIndex == 1) {
                api.getPicture({
                    sourceType: 'library',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'base64',
                    allowEdit: true,
                    quality: 60,
                    saveToPhotoAlbum: false
                }, function (ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            postData();
                            api.toast({
                                msg: '更换成功',
                                duration: 2000,
                                location: 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'bottom'
                        })
                    }
                })
            } else if (ret.buttonIndex == 2) {
                api.getPicture({
                    sourceType: 'camera',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'base64',
                    allowEdit: true,
                    quality: 60,
                    saveToPhotoAlbum: true
                }, function (ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            postData();
                            api.toast({
                                msg: '更换成功',
                                duration: 2000,
                                location: 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'bottom'
                        })
                    }
                })
            }
        })
    }

    function postData() {
        var data = {};
        data['user_id'] = user_id;
        data['base64'] = imgBase64;
        var url = 'user_ajax.ashx?action=update_user_info';
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {
                if (ret.avatar) {
                    $api.setStorage('avatar', '' + ret.avatar + '');
                }
                //我的中心更新数据
                api.sendEvent({
                    name: 'reGetMyInfo',
                    extra: {
                        key: 'true'
                    }
                })
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }
    //		单击加为人脉
    function addFriend(obj) {
//		    index。的头部底部遮罩
        api.execScript({
            name: "root",
            script: "showLayer()"
        })
        mui.confirm("是否加为人脉？", "", ['是', '否'], function (e) {
            if (e.index == 0) {
                $(obj).removeAttr('tapmode');
                $(obj).attr('onclick',null);
                $(obj).text("已加人脉");
                $(obj).addClass("added");
                api.toast({
                    msg: "已添加人脉"
                })
            }
            api.execScript({
                name: "root",
                script: "closeLayer()"
            })
        })
    }
</script>
</html>